<template>
  <div
    v-if="
      $route.name == 'Home' ||
        $route.name == 'Situation' ||
        $route.name == 'Deal' ||
        $route.name == 'Manage' ||
        $route.name == 'Mine'
        "
  >
    <van-tabbar v-model="active" inactive-color="#999999" active-color="#713FF5" fixed placeholder>
      <van-tabbar-item replace v-for="(item, index) in tabbarList" :key="index" :to="item.path">
        <span v-if="index !==2 ">{{ item.title }}</span>
        <img class="icon" v-if="index !==2 " slot="icon" slot-scope="props" :src="props.active ? item.active : item.normal" />
        <div v-if="index == 2">
            <img class="deal" :src="item.active" />
        </div>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: "tabbar",
  data() {
    return {
      active: 0,
      tabbarList: [
        {
          path: "/",
          title: "首页",
          normal: require('@/assets/tabbar/home.png'),
          active: require('@/assets/tabbar/homeS.png')
        },
        {
          path: "/situation",
          title: "行情",
          normal: require('@/assets/tabbar/situation.png'),
          active: require('@/assets/tabbar/situationS.png')
        },
        {
          path: "/deal",
          title: "交易",
          normal: require('@/assets/tabbar/deal.png'),
          active: require('@/assets/tabbar/deal.png')
        },
        {
          path: "/manage",
          title: "理财",
          normal: require('@/assets/tabbar/manage.png'),
          active: require('@/assets/tabbar/manageS.png')
        },
        {
          path: "/mine",
          title: "我的",
          normal: require('@/assets/tabbar/mine.png'),
          active: require('@/assets/tabbar/mineS.png')
        },
      ],
    };
  },

  //监听路由变化
  watch: {
    $route(to) {
      this.activeTab(to.path);
    },
  },

  methods: {
    activeTab(path) {
      var index = this.tabbarList.map((item) => item.path).indexOf(path);
      if (index != -1) {
        this.active = index;
      }
    },
  },
};
</script>

<style scoped>
.deal{
    width: 100px;
    height: 100px;
    margin-top: -40px;
    z-index: 10000000;
}
.icon{
  width: 24px;
  height: 24px;
}
</style>
